<#include "layout/layout.ftl">
<#include "layout/common/article.ftl">
<@layout type="index" title="${options.blog_title!}" keywords="${options.seo_keywords!}" description="${options.seo_description!}" canonical="${context!}">

<style>
  .home-slider {
  	width: 100%;
  	height: 350px !important;
  }

  .home-slider ul li img{
    height: 350px !important;
    max-height: 350px !important;
  }

  .home-slider .prev,.next {
      background-image: none !important;
  }   
  .home-slider .arr svg{
    fill: #4a4a4a !important;
  }

  
  .home-qrcode .box{
    display: block;
    margin: 0 auto;
    width: 200px;
    height: 200px;
    padding: 5px;
    margin-bottom: 8px;
  }
  
  .home-qrcode .home-qrcode-title{
    text-align:center;
    font-size: 18px;
    font-weight: 500;
  }




  .home-article a{
    color: #363636;
  }
  .home-article .title{
    font-size: 16px
  }

  .home-article .content{
    overflow-y: hidden;
    height:80px
  }

</style>
  
<div class="columns">
    <div class="column">  
       <div>   
          <div class="card" >
            <div class="card-content">
              <div id="hwslider" class="hwslider home-slider">
                  <ul>
                    <#if settings.slider_1_enabled!false>
                      <li>
                        <a href="${settings.slider_1_open_url!''}" target="_blank">
                          <img src="${settings.slider_1_image!}" alt="轮播1">
                        </a>
                      </li>
                    </#if>
                      <#if settings.slider_2_enabled!false>
                      <li>
                        <a href="${settings.slider_2_open_url!''}" target="_blank">
                          <img src="${settings.slider_2_image!}" alt="轮播2">
                        </a>
                      </li>
                    </#if>
                        <#if settings.slider_3_enabled!false>
                      <li>
                        <a href="${settings.slider_3_open_url!''}" target="_blank">
                          <img src="${settings.slider_3_image!}" alt="轮播3">
                        </a>
                      </li>
                    </#if>
                    <#if settings.slider_4_enabled!false>
                      <li>
                        <a href="${settings.slider_4_open_url!''}" target="_blank">
                          <img src="${settings.slider_4_image!}" alt="轮播4">
                        </a>
                      </li>
                    </#if>
                    <#if settings.slider_5_enabled!false>
                      <li>
                        <a href="${settings.slider_5_open_url!''}" target="_blank">
                          <img src="${settings.slider_5_image!}" alt="轮播5">
                        </a>
                      </li>
                    </#if>
                  </ul>
              </div>        
            </div>
          </div>  
       </div>
       <div>
         <!-- 因为后台暂时还没开发完 只能先注释掉 -->
         <!-- 
         <div class="columns is-marginless is-paddingless">
            <div class="column" style="padding:10px 5px 10px 0px;">
              <div class="card home-article">
                <header class="card-header">
                  <p class="card-header-title" style="font-size: 18px">
                    热门
                  </p>
                </header>
                <div class="card-content">
                  <h2 class="title">最热的一片文章</h2>
                  <p class="content">
                    “There are two hard things in computer science: cache invalidation, naming things, and off-by-one errors.”
                  </p>
                </div> 
              </div>  
            </div>
            <div class="column" style="padding: 10px 0px 10px 5px;">
              <div class="card home-article">
                <header class="card-header">
                  <p class="card-header-title" style="font-size: 18px">
                    最新
                  </p>
                </header>
                <div class="card-content">
                  <@postTag method="latest" top="1">
                      <#list posts as post>
                        <a href="${post.fullPath!}">
                          <h2 class="title">${post.title!}</h2>
                          <p class="content">${post.summary!}</p>
                        </a>
                      </#list>
                  </@postTag>
                </div> 
              </div>  
            </div>
         </div> 
         -->

        <div class="columns is-marginless is-paddingless">
            <@postTag method="latest" top="1">
                <#list posts as post>
                    <div class="column" style="padding: 10px 0px 0px 0px;">
                      <div class="card home-article">
                          <header class="card-header">
                          <p class="card-header-title" style="font-size: 18px">
                              最新
                          </p>
                          </header>
                          <div class="card-content">
                          
                                  <a href="${post.fullPath!}">
                                  <h2 class="title">${post.title!}</h2>
                                  <p class="content">${post.summary!}</p>
                                  </a>
                              
                          </div> 
                      </div>  
                    </div>
                </#list>
            </@postTag>
         </div> 
       </div>               
  </div>

  <div class="column is-one-quarter">
    <div class="card" >
      <div class="card-content">
        <div class="block" style="padding: 20px 0 20px 0;">
          <div class="home-qrcode">
             <div class="box">
               <img src="${settings.CourseQRCode!}"
                       alt="扫码免费领取课程资料">
             </div>
              <div class="home-qrcode-title">
                扫码免费领取课程资料
              </div>
          </div>
        </div>
        <div class="block" style="padding: 19px 0 19px 0;">
          <div class="home-qrcode">
             <div class="box">
               <img src="${settings.BossQRCode!}"
                       alt="扫码与大佬零距离交流">
             </div>
              <div class="home-qrcode-title">
                扫码与大佬零距离交流
              </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
 
  
   
  	
    
</@layout>